<template>
	<view class="video">
		<view class="topbar">
			<scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false">
				<view class="rel">
					<view class="item" v-for="(item,index) in navList" :key="index" :class="{active:curNav==item.id}"
						@click="switchNav(item.id,index)">
						<view class="desc">
							{{item.name}}
						</view>
					</view>
					<!-- 下划线 -->
					<view class="slide" :style="'width:'+sliderWidth+'rpx;transform:translateX('+sliderOffset+'rpx)'">

					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 视频列表 -->
		<mescroll-uni :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="video-list">
				<view class="video-item" v-for="(item, index) in relatedvideo" :key="index">
					<view class="video-wrap">
						<image :src="item.cover" mode="" class="img"></image>
						<view class="desc ellipsis">
							{{item.name}}
						</view>
						<view class="creater-bar flex-box">
							<view class="name">
								{{item.artists[0].name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		apigetBannber,
		apigetRecommendSongs,
		apigetTopAlbum,
		apigetRelatedVideo,
		apigetNavList
	} from '../../apis/index.js';
	import MescrollUni from "../../components/mescroll-uni/mescroll-uni.vue"

	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				navList: [], //导航条
				curNav: '', //当前选中的导航条
				sliderWidth: 60, //导航条默认宽度60
				sliderOffset: 36, //导航条偏移量	
				relatedvideo: [], //视频列表
				downOption: { //下拉刷新
					auto: true
				},
				upOption: { //上拉加载下一页
					auto: true,
					page: {
						num: 0, //起始页
						size: 10 //一页条数
					}
				}
			}
		},
		onLoad() {
			this.getNavList()
		},

		methods: {
			//获取导航条数据
			getNavList() {
				// const params = {
				// 	id:125
				// }
				apigetNavList().then(res => {
					// console.log(res);
					this.navList = res.data.slice(0, 8)
					//默认选中第一项
					this.curNav = this.navList[0].id
					//自动切换到第一项	
					this.switchNav(this.curNav, 0)
				})
			},
			//导航高亮替换
			switchNav(itemId, index) {
				this.curNav = itemId
				//导航条的宽度 120
				this.sliderWidth = index === 7 ? 180 : 60 && index === 6 ? 160 : 60 && index === 3 ? 115 : 60 && index ===
					4 ? 120 : 60
				//计算偏移量 左边36  文字60+ 间隙50
				this.sliderOffset = 126 * index + (index > 2 ? 60 : 40 && index === 7 ? 60 : 36)
				//加载第一项对应的视频列表
				this.getList(1, 5)
			},
			//视频列表
			getList(pageNum, pageSize) {
				const params = {
					id: this.curNav,
					pageNum,
					pageSize
				}
				apigetRelatedVideo(params).then(res => {
					console.log(res);
					this.relatedvideo = res.data
				})
			},
			downCallback() {
				
			},
			upCallback() {

			}
		}
	}
</script>

<style lang="scss">
	.topbar {
		.h86 {
			height: 86rpx;
		}
	}

	.scroll-view {
		position: fixed;
		top: 0;
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		text-align: center;
		line-height: 86rpx;
		color: #333;
		font-weight: 600;
		border-bottom: 1rpx solid #e6e6e6;
		z-index: 10;
		background: #fff;
		overflow: hidden;

		.item {
			position: relative;
			display: inline-block;
			min-width: 126rpx;
			height: 86rpx;
			line-height: 86rpx;
			padding: 0 20rpx;

			&.active {
				color: #f32628;
			}
		}
	}

	.slide {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		left: 0;
		bottom: 0rpx;
		background: #f32628;
		transition: transform 0.3s;
		z-index: 2;
		/* #ifdef MP-WEIXIN */
		bottom: 2rpx;
		/* #endif */
	}

	.video-list {
		color: #333;
		background: #f8f8f8;

		.tit-bar {
			padding-left: 32rpx;
		}

		.video-item {
			padding-top: 32rpx;
			background: #fff;
			border-bottom: 24rpx solid #f8f8f8;
		}

		.video-wrap {
			width: 686rpx;
			margin: 0 auto;
		}

		.img {
			display: block;
			width: 686rpx;
			height: 390rpx;
			border-radius: 10rpx;
			background: #eee;
		}

		.desc {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 84rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}

	.creater-bar {
		height: 100rpx;
		justify-content: space-between;
		align-items: center;

		.avactor-box {
			align-items: center;
		}

		.avactor {
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
			border-radius: 66rpx;
			background: #eee;
		}

		.name {
			line-height: 100rpx;
		}
	}
</style>